<template>
  <div id="app">
    <header class="app-header">
      <h1>餐厅订单管理系统</h1>
    </header>

    <div class="app-content">
      <KitchenDashboard ref="kitchen" @order-completed="handleOrderCompleted" />
      <UserInterface ref="userInterface" />
    </div>
  </div>
</template>

<script>
import KitchenDashboard from "./components/KitchenDashboard.vue";
import UserInterface from "./components/UserInterface.vue";

export default {
  name: "App",
  components: {
    KitchenDashboard,
    UserInterface,
  },
  methods: {
    handleOrderCompleted(order) {
      this.$refs.userInterface.addCompletedOrder(order);
    },
  },
  mounted() {
    // 模拟接收新订单
    setInterval(() => {
      const mockOrder = {
        id: Math.floor(Math.random() * 1000),
        items: [
          { name: "宫保鸡丁", quantity: 1, price: 28 },
          { name: "米饭", quantity: 2, price: 3 },
        ],
      };
      this.$refs.kitchen.receiveNewOrder(mockOrder);
    }, 30000);
  },
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-header {
  background-color: #2196f3;
  color: white;
  padding: 1rem;
  text-align: center;
}

.app-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button {
  transition: opacity 0.3s;
}

button:hover {
  opacity: 0.8;
}
</style>
